/**
 * @author lulongwen
 * Date: 2023-08-30 22:38
 * Description: Hexagon 六边形
 */

export function Hexagon(props: any) {
  const { width, height } = props;

  const cx = 10;
  const cy = height / 2;

  // 'M10,0 L110,0 L120,30 L110,60 L10,60 L0,30 z'
  const path = [
    [`M${cx}`, 0], // M10,0
    [`L${width - cx}`, 0], // L110,0
    [`L${width}`, cy], // L120,30
    [`L${width - cx}`, height], // L110,60
    [`L${cx}`, height], // L10,60
    ['L0', cy], // L0,30
    ['z'],
  ]
    .map(item => item.join(','))
    .join(' ');

  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      width={width}
      height={height}
      className='block'
    >
      <path
        d={path}
        // d='M10,0 L110,0 L120,30 L110,60 L10,60 L0,30 z'
        fill='#00d7ca'
        strokeWidth='0'
        stroke='#fff'
      />
    </svg>
  );
}
